<template>
    <div style="background-color: white;width: 100%;height: 100%;">
        <el-button link @click="ORderShow()" style="margin-left: 10px;">‹返回</el-button>
        &nbsp;
        <span>|</span>
        &nbsp;
        <span style="font-size: 17px;font-weight: 700;"> 销售订单头信息(🛠️)</span>
        <hr style='background-color:#d3d3d3; height:1px; border:none;'>
        
        <el-form  class="demo-ruleForm" :model="form" ref="formRef" label-width="auto" style="max-width: 1100px;margin-left: 180px;margin-top: 30px;">
            <el-form-item label="订单编码" style="margin: 40px;width: 500px;"  prop="ordersNo" :rules="[ { required: true, message: '必填' },]">
                <el-input v-model="form.ordersNo"  />
            </el-form-item>

            <el-form-item label="订单名称" style="width: 500px;float: right;margin-top: -72px;" prop="ordersName" :rules="[ { required: true, message: '必填' },]">
                <el-input v-model="form.ordersName" />
            </el-form-item>

            <el-form-item label="订单类型" style="margin: 40px;width: 500px;" prop="ordersTypeId" :rules="[ { required: true, message: '必填' },]" >
            <el-select v-model="form.ordersTypeId" >
                <el-option label="请选择" :value="0" />
            <el-option v-for="item in options" :label="item.ordersTypeName" :value="item.ordersTypeId"/>
            </el-select>
            </el-form-item>

            <el-form-item label="所属项目" style="width: 500px;float: right;margin-top: -72px;">
                <el-select v-model="form.projectId" >
                    <el-option label="请选择" :value="0" />
                    <el-option v-for="item in options2" :label="item.projectName" :value="item.projectId"/>
            </el-select>
            </el-form-item>

            <el-form-item label="订单备注" style="margin: 40px;width: 1060px;" >
                <el-input v-model="form.ordersRemark" type="textarea" />
            </el-form-item>


            <el-form-item label="客户" style="margin: 40px;width: 500px;" prop="customerId" :rules="[ { required: true, message: '必填' },]">
                <el-select v-model="form.customerId" placeholder="请选择">
                    <el-option label="请选择" :value="0" />
                    <el-option v-for="item in options1" :label="item.customerName" :value="item.customerId"/>
            </el-select>
            </el-form-item>

            <el-form-item label="订单金额（不含税）" style="width: 500px;float: right;margin-top: -72px;" >
                <el-input v-model="form.ordersPrice" />
            </el-form-item>

            <el-form-item label="币种" style="margin: 40px;width: 500px;" prop="currency" :rules="[ { required: true, message: '必填' },]">
            <el-select v-model="form.currency" placeholder="请选择">
                <el-option label="人民币" value="人民币" />
                <el-option label="美元" value="美元" />
                <el-option label="欧元" value="欧元" />
                <el-option label="英镑" value="英镑" />
                <el-option label="日元" value="日元" />

            </el-select>
            </el-form-item>

            <el-form-item label="预收款金额" style="width: 500px;float: right;margin-top: -72px;" prop="prePrice" :rules="[ { required: true, message: '必填' },]" >
                <el-input v-model="form.prePrice" />
            </el-form-item>


            <el-form-item label="订单开始时间" style="margin: 40px;width: 500px;" >
                <el-col :span="11">
                    <el-date-picker
                    v-model="form.ordersKTime"
                    type="date"
                    style="width: 365px"
                    />
                </el-col>
            </el-form-item>

            <el-form-item label="订单结束时间" style="width: 500px;float: right;margin-top: -72px;" >
                <el-col :span="11">
                    <el-date-picker
                    v-model="form.ordersJTime"
                    type="date"
                    style="width: 365px"
                    />
                </el-col>
            </el-form-item>

            <el-form-item label="签订时间" style="margin: 40px;width: 500px;" prop="signedTime" :rules="[ { required: true, message: '必填' },]">
                <el-col :span="11">
                    <el-date-picker
                    v-model="form.signedTime"
                    type="date"
                    style="width: 365px"
                    />
                </el-col>
            </el-form-item>

            <el-form-item label="状态" style="width: 500px;float: right;margin-top: -72px;" prop="ordersState" :rules="[ { required: true, message: '必填' },]">
                <el-select v-model="form.ordersState"   >
                <el-option label="有效" :value="true" />
                <el-option label="无效" :value="false" />
            </el-select>
            </el-form-item>
            

            <el-form-item label="计税类型" style="margin: 40px;width: 500px;">
                <el-select v-model="form.taxType" >
                <el-option label="增值税" value="增值税" />
                <el-option label="附加税" value="附加税" />
            </el-select>
            </el-form-item>

            <el-form-item label="税率" style="width: 500px;float: right;margin-top: -72px;">
                <el-input v-model="form.rate" />
            </el-form-item>

            <el-form-item label="开票金额（含税）" style="margin: 40px;width: 500px;">
                <el-input v-model="form.billingPrice" />
            </el-form-item>

            <el-form-item label="已收款金额（含税）" style="width: 500px;float: right;margin-top: -72px;">
                <el-input v-model="form.collectedPrice" />
            </el-form-item>

            <el-form-item label="销售员" style="margin: 40px;width: 500px;" prop="salesman" :rules="[ { required: true, message: '必填' },]">
                <el-input v-model="form.salesman" />
            </el-form-item>

            <el-form-item label="销售部门" style="width: 500px;float: right;margin-top: -72px;" prop="departmentId" :rules="[ { required: true, message: '必填' },]">
                <el-select v-model="form.departmentId" placeholder="请选择">
                    <el-option label="请选择" :value="0" />
                    <el-option v-for="item in options3" :label="item.departmentName" :value="item.departmentId"/>
            </el-select>
            </el-form-item>

            <el-button type="success" style="width: 83px;float: right" @click="submitForm(formRef)">保存</el-button>
            
        </el-form>
    </div>
    <div style="background-color: white;width: 100%;height: 100%;margin-top: 2px;">
        <span style="font-size: 17px;font-weight: 700;color: cornflowerblue;margin: 10px;"> 销售订单行信息</span>
        <hr style='background-color:#d3d3d3; height:1px; border:none;'>
        <el-button type="info" style="margin: 10px;float: right;" @click="add()">+新增订单行</el-button>
        <el-table :data="tableData" stripe style="width: 100%;margin-top: 20px;" border :header-cell-style="{background:'#f5f7fa'}">
            <el-table-column prop="orderLineId" label="序号"  />
           <el-table-column prop="inventoryInfoId" label="物料编码"  />
           <el-table-column prop="prices" label="物料名称"   />
           <el-table-column prop="nums" label="数量" />
           <el-table-column prop="unit" label="单位" />
           <el-table-column prop="summary" label="摘要"  />
           <el-table-column prop="handleTime" label="创建时间"  >
            <template #default="scope">
                {{ scope.row.handleTime.substring(0,19).script('T',' ') }}
            </template>
           </el-table-column>
           <el-table-column prop="handle" label="创建人" width="120px" />
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'
import  { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios';
const formRef = ref<FormInstance>()

const apiurls = import.meta.env.VITE_APP_API_URL_ProductionAdd;
const apiurl = import.meta.env.VITE_APP_API_URL_ProductionShow;

const router = useRouter()
const route = useRoute()

const form = reactive({
    ordersNo:'',
    ordersName:'',
    ordersTypeId:0,
    projectId:0,
    ordersRemark:'',
    customerId:0,
    ordersPrice:'',
    currency:'',
    prePrice:'',
    ordersKTime:'',
    ordersJTime:'',
    signedTime:'',
    ordersState:true,
    taxType:'',
    rate:'',
    billingPrice:'',
    collectedPrice:'',
    salesman:'',
    departmentId:0,
    approvalStatusDD:0,
    isDelete:false,
    handle:'李四',
    handleContext:'添加',
    handleTime:'2024-12-18',
    pid:0,
})

const GetIndustry=reactive({
    
})

//订单类型
const options=ref([])
const OrderType=()=>{
    axios.post(apiurl+'/api/ShowProduction/GetOrdersTypeShow',GetIndustry).then((res)=>{
        options.value=res.data.data
    })
}

//客户
const options1=ref([])
const Custumer=()=>{
    axios.get(apiurl+'/api/ShowProduction/GetCustome').then((res)=>{
        options1.value=res.data.data
    })
}


//项目
const options2=ref([])
const Projects=()=>{
    axios.post(apiurl+'/api/ShowProduction/GetProjectShow',GetIndustry).then((res)=>{
        options2.value=res.data.data
    })
}

//部门
const options3=ref([])
const Departments=()=>{
    axios.get(apiurl+'/api/ShowProduction/GetDepartment').then((res)=>{
        options3.value=res.data.data
    })
}


const submitForm=(formEl: FormInstance | undefined)=>{
    if (!formEl) return
    formEl.validate((valid) => {
      if (valid) {
        console.log('submit!')
        return;
      } else {
        console.log('error submit!')
        return;
      }
    })
    ResourAdd()
}


//添加
const ResourAdd=()=>{
    if(form.ordersNo==''){
        return;
    }
    if(form.ordersName==''){
        return;
    }
    if(form.ordersTypeId==0){
        return;
    }
    if(form.customerId==0){
        return;
    }
    if(form.currency==''){
        return;
    }
    if(form.prePrice==''){
        return;
    }
    if(form.signedTime==''){
        return;
    }
    if(form.salesman==''){
        return;
    }
    if(form.departmentId==0){
        return;
    }

    axios.post(apiurls+'/api/ProductionLeo/GetOrdersAdd',{
        ordersNo:form.ordersNo,
        ordersName:form.ordersName,
        ordersTypeId:form.ordersTypeId,
        projectId:form.projectId,
        ordersRemark:form.ordersRemark,
        customerId:form.customerId,
        ordersPrice:form.ordersPrice,
        currency:form.currency,
        prePrice:form.prePrice,
        ordersKTime:form.ordersKTime,
        ordersJTime:form.ordersJTime,
        signedTime:form.signedTime,
        ordersState:form.ordersState,
        taxType:form.taxType,
        rate:form.rate,
        billingPrice:form.billingPrice,
        collectedPrice:form.collectedPrice,
        salesman:form.salesman,
        departmentId:form.departmentId,
        approvalStatusDD:form.approvalStatusDD,
        isDelete:form.isDelete,
        handle:form.handle,
        handleContext:form.handleContext,
        handleTime:form.handleTime,
        pid:form.pid,
        
    }).then((res)=>{
        console.log(123,res)
        if(res.data.code==1){
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
            ORderShow()
        }else{
            ElMessage.error(res.data.msg)
        }
    })
}

const ORderShow=()=>{
    router.push('/OrdersShow')
}

const add=()=>{
    ElMessage({
        message: '请保存过后添加',
    })
}

onMounted(()=>{
    OrderType();
    Custumer()
    Projects()
    Departments()
})
</script>